<template>
	<view :class="themeName">
		<navbar :title="barTitle"></navbar>
		<view class="community-group-purchase" :style="[infoStyle]">
			<view class="head-icon flex-wrap col--center">
				<view class="text-center">
					<image :src="$getImageUri('/resource/image/shopapi/default/icon_file.png')" mode="widthFix"
						v-if="actInfo.status == 1">
					</image>
					<image :src="$getImageUri('/resource/image/shopapi/default/icon_group.png')" mode="widthFix"
						v-else-if="actInfo.status == 2">
					</image>
					<image src="@/bundle/static/images/icon_close.png" mode="widthFix" v-else></image>
				</view>
				<view class="white text-center m-t-20" v-if="actInfo.status == 1">{{$zhTran('进行中')}}</view>
				<view class="white text-center m-t-20" v-else-if="actInfo.status == 2">{{$zhTran('已结束')}}</view>
				<view class="white text-center m-t-20" v-else>{{$zhTran('未开始')}}</view>
			</view>

			<view class="cgp-share-icon flex row-center col-center" v-if="actInfo.status == 1" @click="shareActivity">
				<u-icon name="zhuanfa" size="28" color="rgba(74, 25, 0, 1)" />
				<text class="m-l-5">{{$zhTran('分享团购')}}</text>
			</view>

			<view class="header u-flex-wrap u-col-top">
				<view class="flex full-width">
					<view class="left-title">{{$zhTran('活动时间')}}
					</view>
					<view class="right-detail">{{actInfo.start_time}}{{$zhTran(' 至 ')}}{{actInfo.end_time}}</view>
				</view>
				<view class="flex full-width">
					<view class="left-title">{{$zhTran('提货时间')}}</view>
					<view class="right-detail">{{actInfo.pickup_time}}{{$zhTran(' 开始')}}</view>
				</view>
				<view class="flex full-width">
					<view class="left-title">{{$zhTran('消费金额')}}</view>
					<view class="right-detail">￥{{actInfo.order_amount}}</view>
				</view>
				<view class="flex full-width">
					<view class="left-title">{{$zhTran('订单收益')}}</view>
					<view class="right-detail">￥{{actInfo.order_profit}}</view>
				</view>
				<view class="flex full-width">
					<view class="left-title">{{$zhTran('订单数量')}}</view>
					<view class="right-detail">{{actInfo.order_count}}</view>
				</view>
			</view>

			<!-- 商品 -->
			<view :class="['goods-container', `goods-container-${goodsCardStyle}`]">
				<view class="goods-item" @click.native="goGoodsDetail(item.goods_id)"
					v-for="item,goodsIndex in goodsList" :key="goodsIndex">
					<goods-card :key="goodsIndex" shape="rectangle" :name="item.goods_name" :image="item.goods_image"
						:contain-style="{ height: '180rpx' }" :fieldShowHide="fieldShowHide"
						:image-style="{ width: '180rpx', height: '180rpx' }">
						<view class="m-t-20 m-b-20" slot="other-tag" v-if="item.sell_count > 0">
							<view class="cgp-tag flex">
								<image :src="$getImageUri('/resource/image/shopapi/default/icon_file.png')"
									mode="widthFix">
								</image>
								<text>{{$zhTran('已售'+item.sell_count+'件')}}</text>
							</view>
						</view>
						<u-gap height="80" v-else></u-gap>
						<view class="flex-1" slot="default">
							<view class="m-t-10 flex row-between">
								<price :content="item.max_price" main-size="42rpx" minor-size="36rpx"
									:prefix="price_symbol"
									:color="fieldStyles.price_color != '' ? fieldStyles.price_color : themeColor">
									<view slot="suffix">
										<price class="muted sm m-l-12" :line-through="true" :prefix="price_symbol"
											:color="fieldStyles.scribing_price_color" slot="suffix"
											:content="item.sell_price"
											v-show="Number(item.sell_price) && fieldShowHide.show_scribing_price" />
									</view>
								</price>
								<view class="cgp-share-goods-icon flex row-center col-center"
									@click.native.stop="shareGoods(item)">
									<u-icon name="zhuanfa" size="28" color="rgba(74, 25, 0, 1)" />
									<text class="m-l-5">{{$zhTran('分享')}}</text>
								</view>
							</view>
						</view>
					</goods-card>
				</view>
			</view>

			<u-popup v-model="sharePosterVisible" mode="center" width="90%">
				<goods-poster ref="poster" :leader="options.leader" :goods="options.goods" :options="options"
					:activity="options.activity" @success="handleSuccess" @complete="handleComplete"
					v-if="posterShow == 1" />
				<activity-poster ref="posterActivity" :leader="optionsActivity.leader" :options="optionsActivity"
					:activity="optionsActivity.activity" @success="handleSuccess" @complete="handleComplete"
					v-if="posterShow == 2" />
				<!-- <image :src="imgPath" mode="widthFix" class="share-poster"></image> -->
				<view class="share-btns flex row-between m-t-20">
					<view class="share" @click="saveImageToOther">{{$zhTran('转发好友')}}</view>
					<view class="saveImg" @click="saveImageToAlbum">{{$zhTran('点击保存到相册')}}</view>
				</view>
			</u-popup>

			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="$zhTran('社区团购活动异常')"
						:src="$getImageUri('resource/image/shopapi/uniapp/empty/order.png')" :icon-size="280"></u-empty>
				</template>
			</page-status>
		</view>
		<loading-view v-show="loading"></loading-view>
	</view>
</template>

<script>
	import {
		apiMnpCgpQrCode,
		apiMnpCgpGoodsQrCode
	} from "@/api/app";
	import {
		baseURL,
		basePath
	} from "@/config/app";
	import {
		apiCommunityGroupPurchaseLeaderActivityDetail,
	} from "@/api/community_group_purchase";
	import {
		PageStatusEnum,
	} from "@/utils/enum";
	import goodsPoster from "@/bundle2/pages/community_group_purchase/poster/goods_poster.vue";
	import activityPoster from "@/bundle2/pages/community_group_purchase/poster/activity_poster.vue";

	export default {
		name: "CGPActivityDetail",
		components: {
			goodsPoster,
			activityPoster
		},

		data() {
			return {
				pageStatus: PageStatusEnum["LOADING"],
				// 页面状态
				actInfo: {}, // 活动信息
				price_symbol: '￥',
				goodsList: [],
				fieldShowHide: {
					show_goods_model: 0,
					show_goods_stock: 0,
					show_gfa_flag: 0,
					show_goods_code: 0,
					show_goods_tag: 0,
					show_cgp_tag: 1,
					show_scribing_price: 1,
				},
				fieldStyles: {
					price_color: '#FA4034'
				},
				cgp_id: '',
				barTitle: this.$zhTran('社区团购活动'),
				sharePosterVisible: false,
				options: {
					leader: {},
					goods: {},
					activity: {},
					qr_code: ''
				},
				optionsActivity: {
					leader: {},
					activity: {},
					qr_code: ''
				},
				imgPath: '',
				loading: false,
				posterShow: ''
			};
		},

		computed: {
			infoStyle() {
				if (this.actInfo.status == 1) {
					var bgimg = this.$getImageUri('/resource/image/shopapi/default/bg_orange.png')
				} else if (this.actInfo.status == 2) {
					var bgimg = this.$getImageUri('/resource/image/shopapi/default/bg_green.png')
				} else {
					var bgimg = this.$getImageUri('/resource/image/shopapi/default/bg_gray.png')
				}
				return {
					'background-image': `url(${bgimg})`,
				}
			}
		},

		methods: {
			// 刷新订单数据
			refreshActivityData() {
				return apiCommunityGroupPurchaseLeaderActivityDetail({
						id: this.cgp_id,
						flag: 1,
					})
					.then((ndata) => {
						let data = this.$zhTran(ndata)
						this.actInfo = data;
						this.goodsList = data.goods ?? []
						this.barTitle = data.name
						return Promise.resolve(data);
					})
					.catch((err) => {
						return Promise.reject(err);
					});
			},
			// 跳转商品详情
			goGoodsDetail(goods_id) {
				this.$Router.push({
					path: "/bundle2/pages/community_group_purchase/user/goods_detail",
					query: {
						cgp_id: this.cgp_id,
						goods_id,
						leader_id: this.actInfo.leader.id
					},
				});
			},
			shareGoods(row) {
				this.loading = true
				this.options.leader = this.actInfo.leader
				this.options.activity = {
					start_time: this.actInfo.start_time,
					end_time: this.actInfo.end_time,
					buy_avatar: this.actInfo.buy_avatar,
					buy_user: this.actInfo.buy_user,
				}
				this.options.goods = row
				this.posterShow = 1
				this.getGoodsPoster()
			},
			shareActivity() {
				this.loading = true
				this.optionsActivity.leader = this.actInfo.leader
				this.optionsActivity.activity = this.actInfo
				this.posterShow = 2
				this.getPoster()
			},
			async getPoster() {
				try {
					const res = await Promise.all([
						// #ifdef MP-WEIXIN
						apiMnpCgpQrCode({
							cgp_id: this.cgp_id,
							leader_id: this.actInfo.leader.id
						})
						// #endif
					]);
					console.log('res', res)
					// #ifdef MP-WEIXIN
					this.optionsActivity.qr_code = res[0]?.qr_code;
					// #endif
					console.log('optionsActivity', this.optionsActivity)
					this.$nextTick(() => {
						this.$refs.posterActivity.drawCanvas();
					})
				} catch (e) {
					this.$toast({
						title: e,
					});
				} finally {
					this.loading = false
				}
			},
			async getGoodsPoster() {
				try {
					const res = await Promise.all([
						// #ifdef MP-WEIXIN
						apiMnpCgpGoodsQrCode({
							cgp_id: this.cgp_id,
							leader_id: this.actInfo.leader.id,
							goods_id: this.options.goods.goods_id
						})
						// #endif
					]);
					console.log('res', res)
					// #ifdef MP-WEIXIN
					this.options.qr_code = res[0]?.qr_code;
					// #endif
					console.log('options', this.options)
					this.$nextTick(() => {
						this.$refs.poster.drawCanvas();
					})
				} catch (e) {
					this.$toast({
						title: e,
					});
				} finally {
					this.loading = false
				}
			},
			handleSuccess(val) {
				console.log('handleSuccess', this.imgPath)
				this.imgPath = val;
				this.sharePosterVisible = true
				this.loading = false
			},
			handleComplete() {
				console.log('handleComplete')
				this.loading = false
			},
			saveImageToOther() {
				console.log('imgPath', this.imgPath)
				uni.showShareImageMenu({
					path: this.imgPath
				})
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
		},

		async onLoad() {
			const optionsRoute = this.$Route.query;

			// this.getCategoryInfo()
			try {
				if (!optionsRoute.cgp_id) throw new Error(this.$zhTran("社区团购活动异常"));
				this.cgp_id = optionsRoute.cgp_id;
				await this.refreshActivityData()
				this.pageStatus = PageStatusEnum["NORMAL"];
			} catch (err) {
				console.log(err);
				this.pageStatus = PageStatusEnum["ERROR"];
			}
		},

		onUnload() {},
	};
</script>

<style lang="scss" scoped>
	.community-group-purchase {
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 30rpx;
		position: relative;

		.head-icon {
			margin: 50rpx 0;

			image {
				width: 60rpx;
			}
		}

		.header {
			border-radius: 7px;
			background-color: #FFFFFF;
			display: flex;
			min-height: 264rpx;
			padding: 30rpx;

			.full-width {
				width: 100%;
				margin-bottom: 20rpx;

				.left-title {
					margin-right: 30rpx;
				}
			}
		}

		.cgp-share-icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			background-color: rgba(255, 208, 0, 1);
			color: rgba(74, 25, 0, 1);
			font-size: 24rpx;
			padding: 6rpx 20rpx;
			border-radius: 50rpx;
		}


	}

	.goods-container {

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 16rpx;

			&-content {
				box-sizing: border-box;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				position: relative;

				.goods-other {
					flex: 1;
					display: flex;
					justify-content: space-between;
				}
			}

			.cgp-share-goods-icon {
				background-color: rgba(255, 208, 0, 1);
				color: rgba(74, 25, 0, 1);
				font-size: 24rpx;
				padding: 6rpx 20rpx;
				border-radius: 50rpx;
			}

			.cgp-tag {
				width: 160rpx;
				font-size: 22rpx;
				color: #fff;
				padding: 6rpx 12rpx;
				border-radius: 50rpx;
				background: linear-gradient(129.81deg, rgba(253, 162, 69, 1) 0%, rgba(252, 113, 38, 1) 100%);

				image {
					width: 20rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.share-box {
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	}

	.share-poster {
		width: 100%;
	}

	.share-btns {
		&>view {
			width: calc((100% - 30rpx) / 2);
			font-size: 26rpx;
			color: rgba(34, 34, 34, 1);
			border-radius: 10rpx;
			padding: 20rpx 0;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
		}

		.saveImg {
			background-color: rgba(255, 208, 0, 1);
		}
	}
</style>